<template>
  <div class="app-container">
    <!-- 搜索区域使用 collapse transition -->
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper filter-card" shadow="hover">
        <div>
          <el-form
            ref="form"
            :model="listQuery"
            :inline="true"
            label-width="80px"
          >
            <el-form-item label="单据日期:">
              <div class="date-range-container">
                <el-date-picker
                  v-model="listQuery.startDate"
                  type="date"
                  placeholder="起始日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
                <span class="date-separator">至</span>
                <el-date-picker
                  v-model="listQuery.endDate"
                  type="date"
                  placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
              </div>
            </el-form-item>

            <el-form-item label="供应商:">
              <el-input
                v-model="listQuery.supplier"
                placeholder=""
                suffix-icon="el-icon-more"
                style="width: 180px"
                clearable
              />
            </el-form-item>

            <el-form-item label="商品:">
              <el-input
                v-model="listQuery.product"
                placeholder="按商品编号/名称/条码查询"
                suffix-icon="el-icon-more"
                style="width: 250px"
                clearable
              />
            </el-form-item>

            <el-form-item label="业务类别:">
              <el-select
                v-model="listQuery.businessType"
                clearable
                placeholder="全部"
                style="width: 120px"
              >
                <el-option label="全部" value="" />
                <el-option label="购货" value="购货" />
                <el-option label="退货" value="退货" />
              </el-select>
            </el-form-item>

            <el-form-item label="">
              <el-checkbox
                v-model="listQuery.includeReturnOrder"
              >显示退货单据</el-checkbox>
            </el-form-item>

            <el-form-item label="">
              <el-checkbox
                v-model="listQuery.showLatestPrice"
                style="margin-left: 15px"
              >显示最近采购价</el-checkbox>
            </el-form-item>

            <el-form-item class="form-buttons">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="handleFilter"
              >查询</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="resetForm"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <el-card class="main-content-card" shadow="hover">
      <!-- 操作按钮区域 -->
      <!-- <div class="table-operations">
        <el-button
          type="primary"
          size="small"
          class="filter-trigger"
          @click="isFilterVisible = !isFilterVisible"
          >{{ isFilterVisible ? "收起" : "检索" }}
          <i
            :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
          ></i>
        </el-button>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-back"
          @click="goBack"
          >返回</el-button
        >
      </div> -->

      <!-- 报表标题 - 居中显示，添加渐变背景 -->
      <div class="report-title-container">
        <div class="report-title-centered">商品采购明细表</div>
      </div>

      <!-- 功能按钮和日期范围 -->
      <div class="report-header">
        <div class="date-range">
          <!-- 日期: {{ listQuery.startDate }} 至 {{ listQuery.endDate }} -->
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-back"
            @click="goBack"
          >返回</el-button>
          <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
          <el-button type="primary" icon="el-icon-printer" @click="handlePrint">打印</el-button>
        </div>
        <div class="report-actions" />
      </div>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        element-loading-text="加载中"
        stripe
      >
        <el-table-column
          prop="purchaseDate"
          label="采购日期"
          sortable
          width="100"
        />

        <el-table-column
          prop="purchaseNo"
          label="采购单据号"
          sortable
          width="140"
        >
          <template slot-scope="scope">
            <span class="order-number">{{ scope.row.purchaseNo }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="businessType" label="业务类别" width="90">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.businessType === '购货' ? 'success' : 'danger'">
              {{ scope.row.businessType }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="supplier"
          label="供应商"
          sortable
          width="180"
        />

        <el-table-column
          prop="discount"
          label="折扣折"
          width="80"
          align="right"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.discount }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="salesPerson"
          label="业务员"
          sortable
          width="90"
        />

        <el-table-column
          prop="productId"
          label="商品编号"
          sortable
          width="100"
        >
          <template slot-scope="scope">
            <span class="product-id">{{ scope.row.productId }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="productName"
          label="商品名称"
          width="120"
        />

        <el-table-column
          prop="barcode"
          label="商品条码"
          width="120"
        />

        <el-table-column
          prop="remark"
          label="商品备注"
          width="120"
        />

        <el-table-column
          prop="specification"
          label="规格型号"
          width="100"
        />

        <el-table-column prop="brand" label="品牌" width="80" />

        <el-table-column prop="unit" label="单位" width="60" />
      </el-table>
    </el-card>

    <!-- 底部汇总行 -->
    <div class="summary-row">
      <div class="summary-label">合计:</div>
      <div class="summary-content" />
      <div class="summary-quantity" />
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 右侧辅助栏 -->
    <div class="side-helper">
      <div class="helper-item" title="首页">
        <i class="el-icon-s-home" />
      </div>
      <div class="helper-item" title="帮助">
        <i class="el-icon-question" />
      </div>
      <div class="helper-item" title="消息">
        <i class="el-icon-message" />
      </div>
      <div class="helper-item" title="历史">
        <i class="el-icon-time" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PurchaseDetails',
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 100,
        startDate: '2025-03-01',
        endDate: '2025-03-24',
        supplier: '',
        salesPerson: '',
        product: '',
        businessType: '',
        includeReturnOrder: false,
        showLatestPrice: false
      },
      total: 1,
      tableData: [],
      loading: false,
      isFilterVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getList() {
      this.loading = true
      // 模拟API调用 - 实际项目中替换为真实API
      setTimeout(() => {
        // 获取数据的逻辑
        this.loading = false
      }, 500)
    },
    handleExport() {
      this.$message({
        message: '导出功能将在此实现',
        type: 'info'
      })
    },
    handlePrint() {
      this.$message({
        message: '打印功能将在此实现',
        type: 'info'
      })
    },
    resetForm() {
      this.listQuery = {
        startDate: '2025-03-01',
        endDate: '2025-03-24',
        supplier: '',
        product: '',
        businessType: '',
        includeReturnOrder: false,
        showLatestPrice: false
      }
      this.getList()
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  position: relative;
  padding-bottom: 30px;
}

.search-wrapper {
  margin-bottom: 15px;
}

.filter-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.main-content-card {
  margin-bottom: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.date-range-container {
  display: flex;
  align-items: center;
}

.date-separator {
  margin: 0 5px;
}

.table-operations {
  margin-bottom: 15px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

/* 报表标题容器 - 添加渐变背景 */
.report-title-container {
  background: linear-gradient(to right, #f7f9fb, #e8eef5, #f7f9fb);
  padding: 15px 0;
  margin: -20px -20px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

/* 居中显示的报表标题 */
.report-title-centered {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #f7f9fb, #409EFF, #f7f9fb);
    border-radius: 3px;
  }
}

/* 功能按钮和日期范围 */
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.date-range {
  font-size: 14px;
  color: #606266;
}

.report-actions {
  margin-left: 10px;
}

.form-buttons {
  margin-left: 10px;
}

// 表格样式
.el-table {
  border-radius: 4px;
  overflow: hidden;

  &::before {
    height: 0;
  }
}

// 数据样式
.product-id, .order-number {
  color: #409EFF;
  font-weight: 500;
}

.quantity {
  font-weight: bold;
  color: #303133;
}

/* 合计行 */
.summary-row {
  display: flex;
  background-color: #fdf6ec;
  padding: 12px 20px;
  font-weight: bold;
  border: 1px solid #ebeef5;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.summary-label {
  width: 80px;
  color: #e6a23c;
}

.summary-content {
  flex: 1;
}

.summary-quantity {
  width: 100px;
  text-align: right;
  color: #e6a23c;
}

/* 分页 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 辅助功能侧边栏 */
.side-helper {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
}

.helper-item {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s;

  i {
    font-size: 20px;
  }

  &:hover {
    color: #409EFF;
    background-color: #ecf5ff;
  }

  &:last-child {
    border-bottom: none;
  }
}
</style>
